<script lang="ts" setup>
import { CloudUploadOutline, FileTrayFull } from '@vicons/ionicons5'
import { Database } from '@vicons/tabler'
import { ref } from 'vue'
const handleUpload = () => {}

const emit = defineEmits(['nextStep'])

const handleNext = () => {
  emit('nextStep')
}

const segmentationValue = ref(1)
</script>

<template>
  <n-space vertical>
    <p class="text-3xl mb-8">选择数据源</p>
    <senior-radio-group v-model:value="segmentationValue" style="width: 600px">
      <div class="w-full flex gap-5">
        <senior-radio
          style="width: 300px"
          :value="1"
          :icon="FileTrayFull"
          iconColor="#7839EE"
          iconBackgroundColor="#F5F3FF"
          label="本地文本文件"
          description="导入本地已有文本文件"
        >
        </senior-radio>
        <senior-radio
          :disabled="true"
          style="width: 300px"
          :value="2"
          :icon="Database"
          iconColor="#F6AD55"
          iconBackgroundColor="#FFF7E8"
          label="远程数据库"
          description="导入远程数据库中的某一张表数据库表"
        >
        </senior-radio>
      </div>
    </senior-radio-group>

    <p class="text-2xl mt-8">上传文本文件</p>
    <n-upload
      accept=".txt,.markdown,.pdf,.html,.xlsx,.xls,.docx,.csv,.eml,.msg,.pptx,.ppt,.xml,.epub"
      class="w-600px"
      :max-size="15 * 1024 * 1024"
      @change="handleUpload"
      multiple
      directory-dnd
      :max="5"
    >
      <n-upload-dragger>
        <div style="margin-bottom: 12px">
          <n-icon size="48" :depth="3">
            <CloudUploadOutline />
          </n-icon>
        </div>
        <n-text style="font-size: 16px"> 点击或者拖动文件到该区域来上传 </n-text>
        <n-p depth="3" style="margin: 8px 0 0 0">
          请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
        </n-p>
      </n-upload-dragger>
    </n-upload>
    <n-text depth="3">
      支持的文件格式: TXT, MARKDOWN, PDF, HTML, XLSX, XLS, DOCX, CSV, EML, MSG, PPTX, PPT, XML,
      EPUB. 单个文件不超过 15MB.
    </n-text>

    <n-button type="primary" @click="handleNext" class="w-150px rounded-2xl"> 下一步 </n-button>
  </n-space>
</template>
